<html>
<head>
  <style>
    
    div.container 
    {
      flow:horizontal-wrap;
      width:*;
      height:*;
      border:1dip solid;
    }
    div.cell 
    {
      height:3em;
      width:*;
      overflow:hidden;
    }
    div.cell:nth-child(1),
    div.cell:nth-child(3n+1)
    {
      clear:right; /* four in the row; */
    }
    
    div.test
    {
      background-color: gold;
      color: black;
      width:100dip;
      padding:4dip;
      margin:4dip;
      white-space:nowrap;
      overflow:hidden;
      
    }
    div.test:hover
    {
      background-color: red;
      width:200dip;
    }
    
    div.test[ease="linear"]         { transition: width linear 0.5s        , background-color linear 0.5s; }
    div.test[ease="quad-in"]        { transition: width quad-in 0.5s       , background-color quad-in 0.5s; }
    div.test[ease="quad-out"]       { transition: width quad-out 0.5s      , background-color quad-out 0.5s; }
    div.test[ease="quad-in-out"]    { transition: width quad-in-out 0.5s   , background-color quad-in-out 0.5s; }
    div.test[ease="cubic-in"]       { transition: width cubic-in 0.5s      , background-color cubic-in 0.5s; }
    div.test[ease="cubic-out"]      { transition: width cubic-out 0.5s     , background-color cubic-out 0.5s; }
    div.test[ease="cubic-in-out"]   { transition: width cubic-in-out 0.5s  , background-color cubic-in-out 0.5s; }
    div.test[ease="quart-in"]       { transition: width quart-in 0.5s      , background-color quart-in 0.5s; }
    div.test[ease="quart-out"]      { transition: width quart-out 0.5s     , background-color quart-out 0.5s; }
    div.test[ease="quart-in-out"]   { transition: width quart-in-out 0.5s  , background-color quart-in-out 0.5s; }
    div.test[ease="quint-in"]       { transition: width quint-in 0.5s      , background-color quint-in 0.5s; }
    div.test[ease="quint-out"]      { transition: width quint-out 0.5s     , background-color quint-out 0.5s; }
    div.test[ease="quint-in-out"]   { transition: width quint-in-out 0.5s  , background-color quint-in-out 0.5s; }
    div.test[ease="sine-in"]        { transition: width sine-in 0.5s       , background-color sine-in 0.5s; }
    div.test[ease="sine-out"]       { transition: width sine-out 0.5s      , background-color sine-out 0.5s; }
    div.test[ease="sine-in-out"]    { transition: width sine-in-out 0.5s   , background-color sine-in-out 0.5s; }
    div.test[ease="expo-in"]        { transition: width expo-in 0.5s       , background-color expo-in 0.5s; }
    div.test[ease="expo-out"]       { transition: width expo-out 0.5s      , background-color expo-out 0.5s; }
    div.test[ease="expo-in-out"]    { transition: width expo-in-out 0.5s   , background-color expo-in-out 0.5s; }
    div.test[ease="circ-in"]        { transition: width circ-in 0.5s       , background-color circ-in 0.5s; }
    div.test[ease="circ-out"]       { transition: width circ-out 0.5s      , background-color circ-out 0.5s; }
    div.test[ease="circ-in-out"]    { transition: width circ-in-out 0.5s   , background-color circ-in-out 0.5s; }
    div.test[ease="elastic-in"]     { transition: width elastic-in 0.5s    , background-color elastic-in 0.5s; }
    div.test[ease="elastic-out"]    { transition: width elastic-out 0.5s   , background-color elastic-out 0.5s; }
    div.test[ease="elastic-in-out"] { transition: width elastic-in-out 0.5s, background-color elastic-in-out 0.5s; }
    div.test[ease="back-in"]        { transition: width back-in 0.5s       , background-color back-in 0.5s; }
    div.test[ease="back-out"]       { transition: width back-out 0.5s      , background-color back-out 0.5s; }
    div.test[ease="back-in-out"]    { transition: width back-in-out 0.5s   , background-color back-in-out 0.5s; }
    div.test[ease="bounce-in"]      { transition: width bounce-in 0.5s     , background-color bounce-in 0.5s; }
    div.test[ease="bounce-out"]     { transition: width bounce-out 0.5s    , background-color bounce-out 0.5s; }
    div.test[ease="bounce-in-out"]  { transition: width bounce-in-out  0.5s, background-color bounce-in-out  0.5s; } 
    
  </style>  
</head>
<body>
  <h1>Extended transition property demo, ease functions</h1>
  <div .container>
    <div .cell><div .test  ease="linear"        >linear</div></div>
    <div .cell><div .test  ease="quad-in"       >quad-in</div></div>
    <div .cell><div .test  ease="quad-out"      >quad-out</div></div>
    <div .cell><div .test  ease="quad-in-out"   >quad-in-out</div></div>
    <div .cell><div .test  ease="cubic-in"      >cubic-in</div></div>
    <div .cell><div .test  ease="cubic-out"     >cubic-out</div></div>
    <div .cell><div .test  ease="cubic-in-out"  >cubic-in-out</div></div>
    <div .cell><div .test  ease="quart-in"      >quart-in</div></div>
    <div .cell><div .test  ease="quart-out"     >quart-out</div></div>
    <div .cell><div .test  ease="quart-in-out"  >quart-in-out</div></div>
    <div .cell><div .test  ease="quint-in"      >quint-in</div></div>
    <div .cell><div .test  ease="quint-out"     >quint-out</div></div>
    <div .cell><div .test  ease="quint-in-out"  >quint-in-out</div></div>
    <div .cell><div .test  ease="sine-in"       >sine-in</div></div>
    <div .cell><div .test  ease="sine-out"      >sine-out</div></div>
    <div .cell><div .test  ease="sine-in-out"   >sine-in-out</div></div>
    <div .cell><div .test  ease="expo-in"       >expo-in</div></div>
    <div .cell><div .test  ease="expo-out"      >expo-out</div></div>
    <div .cell><div .test  ease="expo-in-out"   >expo-in-out</div></div>
    <div .cell><div .test  ease="circ-in"       >circ-in</div></div>
    <div .cell><div .test  ease="circ-out"      >circ-out</div></div>
    <div .cell><div .test  ease="circ-in-out"   >circ-in-out</div></div>
    <div .cell><div .test  ease="elastic-in"    >elastic-in</div></div>
    <div .cell><div .test  ease="elastic-out"   >elastic-out</div></div>
    <div .cell><div .test  ease="elastic-in-out">elastic-in-out</div></div>
    <div .cell><div .test  ease="back-in"       >back-in</div></div>
    <div .cell><div .test  ease="back-out"      >back-out</div></div>
    <div .cell><div .test  ease="back-in-out"   >back-in-out</div></div>
    <div .cell><div .test  ease="bounce-in"     >bounce-in</div></div>
    <div .cell><div .test  ease="bounce-out"    >bounce-out</div></div>
    <div .cell><div .test  ease="bounce-in-out" >bounce-in-out </div></div>
  </div>

</body>
</html>